/**=== RONDELL === **/

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
  grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
  gap: 10px; /* Setzt den Abstand zwischen den Elementen */
  width: 1800px; /* Maximale Breite des Grids, kann angepasst werden */
  margin: auto; /* Zentriert das Grid horizontal */
  margin-bottom: 0px;
  transform: scale(0.8);
  margin-top: 60px;

  gap: 10px; /* Abstand zwischen den Elementen */
  max-width: 100%; /* Setze maximale Breite auf 100% */
  margin: 0 auto; /* Zentriert das Grid */

  grid-template-columns: repeat(3, 1fr); /* Genau 3 Spalten */

}

.gallery__item {
  aspect-ratio: 16/9; /* Beispiel für ein Seitenverhältnis von 16:9 */
  width: 100%;
  height: auto;
  border-radius: 15px;
  transition: .3s ease;
}


.gallery__item:hover {
  transform: scale(0.97);
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%; /* Breite des Bildes auf 100% der Zelle setzen */
  height: 100%; /* Höhe des Bildes auf 100% der Zelle setzen */
  object-fit: cover; /* Bild anpassen und zuschneiden, um das Seitenverhältnis zu erhalten */
  border-radius: 15px; /* Abgerundete Ecken */
  transition: opacity 0.3s ease; /* Animation bei Hover */
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2);
}

.gallery__item img:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


/*ACHTUNG DER TATSÄCHLICHE STYLE IST OBEN*/
#references .buttonMore {
padding-left: 140px;
padding-right: 140px;
padding-top: 20px;
padding-bottom: 20px;
}




@media screen and (max-width: 1900px) {



  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1600px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 0px;
    transform: scale(0.8);
    margin-top: 60px;
  }

}


@media screen and (max-width: 1500px) {


  #references {
    height: 1350px;
    text-align: center;
  }



  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1400px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 0px;
    transform: scale(0.8);
    margin-top: 60px;
  }
}


@media screen and (max-width: 1350px) {


  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1200px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 0px;
    transform: scale(0.8);
    margin-top: 60px;
  }
}



@media screen and (max-width: 1150px) {


  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1000px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 0px;
    transform: scale(0.8);
    margin-top: 60px;
  }
}


@media screen and (max-width: 1050px) {

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 800px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 0px;
    transform: scale(0.8);
    margin-top: 60px;
  }
}



@media screen and (max-width: 850px) {

  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(9, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 600px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 0px;
    transform: scale(0.8);
    margin-top: 60px;
  }
}


@media screen and (max-width: 630px) {


  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(9, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 400px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

}



@media screen and (max-width: 430px) {

  #references {
    height: 2800px;
    text-align: center;
  }


  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(9, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 350px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

}